<template>
  <div class="search-box">
    <van-sticky :offset-top="0">
      <div class="search">
        <van-icon name="arrow-left" color="#fff" @click="router.go(-1)" />
        <van-search
          v-model="searchvh"
          shape="round"
          background="#B0352F"
          placeholder="请输入搜索关键词"
          clearable
        />
        <span @click="onSeach">搜索</span>
      </div>
    </van-sticky>

    <div class="search-history" v-if="searchArr.length">
      <div class="search-top">
        <van-icon name="clock-o" color="red" />
        <h2>历史搜索</h2>
       <span @click="onHistory">   
        清空历史记录</span>
      </div>
      <van-tag size="large" plain v-for="item,index in searchArr" :key="index" @click="goSeachList(item)">
        {{ item }}
      </van-tag>
     
    </div>


     <div v-else>
          <p style="font-size: 16px;">暂无搜索记录.....</p>
     </div>


    <div class="search-remen">
      <div class="search-top">
        <van-icon name="fire" color="red" />
        <h2>搜索历史</h2>
      </div>
      <van-tag size="large" plain>易冲泡茶</van-tag>
      <van-tag size="large" plain>经典紫砂壶</van-tag>
      <van-tag size="large" plain>送礼</van-tag>
      <van-tag size="large" plain>易冲泡茶</van-tag>
      <van-tag size="large" plain>经典紫砂壶</van-tag>
      <van-tag size="large" plain>送礼</van-tag>
      <van-tag size="large" plain>易冲泡茶</van-tag>
      <van-tag size="large" plain>经典紫砂壶</van-tag>
      <van-tag size="large" plain>送礼</van-tag>
    </div>

    <div class="recommend">
      <div class="recommend-top">
        <van-icon name="good-job" color="red" />
        <p>推荐商品</p>
      </div>

      <div class="recommend-bottom">
        <ul>
          <li v-for="item in recommendList" :key="item.id">
            <img
              :src="item.imgUrl"
              alt=""
            />
            <span>{{ item.title }}</span>
            <p class="p1">{{ item.name }}</p>
            <p class="p2">{{ item.price }}元</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from 'vant';
let router = useRouter();
let searchvh = ref("");
let searchArr=ref([])
let searchListData=ref([])

let onSeach = () => {
     
    if(!searchvh.value)return
    if(!localStorage.getItem("searchList")){

       localStorage.setItem("searchList", "[]");
    }else{
        searchArr.value=JSON.parse(localStorage.getItem("searchList"));
       
    }
    searchArr.value.unshift(searchvh.value);

    let newArr=new Set(searchArr.value);

    localStorage.setItem("searchList", JSON.stringify(Array.from(newArr)));
    
    

  //跳转到搜索结果页并记录搜索历史
  router.push({ path: '/search/list', query: { name: searchvh.value }});
  // TODO: 记录搜索历史
};
onMounted(()=>{
 searchArr.value=JSON.parse(localStorage.getItem("searchList")) || []
})
let recommendList=ref(
  [
    {
      id:1,
      imgUrl:"https://img.tea7.com/0130744_0.png?x-oss-process=image/resize,w_500",
      name:"云南凤庆经典蜜香滇红",
      title:"外形讨喜  甘甜可口",
      price:88
    },
    {
       id:2,
      imgUrl:"http://img.tea7.com/0032494_0.jpeg?x-oss-process=image/resize,w_500",
      name:"无烟工艺正山小种2号",
      title:"浓厚薯密香",
      price:88
    },
    {
       id:3,
      imgUrl:"http://img.tea7.com/0126611_0.jpeg?x-oss-process=image/resize,w_500",
      name:"武夷山高级大红袍2号",
      title:"轻火焙制  天然花香",
      price:88
    },
     {
       id:4,
      imgUrl:"http://img.tea7.com/0149490_0.jpeg?x-oss-process=image/resize,w_500",
      name:"2023春茶明前龙井飞花",
      title:"只采单芽 满口鲜活",
      price:88
    }
  ]
  )

let onHistory=()=>{
 showDialog({
  title: '提示',
  message: "确定执行此操作?"
}).then((res) => {
  if (res=="confirm") {
    localStorage.removeItem("searchList")
    searchArr.value=[]
   
  }
   
});
}

let goSeachList=(item)=>{
   console.log(item);
  router.push({ path: '/search/list', query: { name: item }});
}





</script>

<style lang="scss" scoped>
.search-box {
  height: 190vh;
  .search {
    display: flex;
    justify-content: space-around;
    background-color: #b0352f;
    align-items: center;
    span {
      font-size: 19px;
      color: #fff;
      margin-right: 10px;
    }
    .van-search {
      width: 250px;
    }
  }

  .search-history {
    margin-left: 10px;
    margin-top: 10px;
    .search-top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      justify-content: space-between;
      h2{
       margin-right: 150px;
      }
       span{
        font-size: 18px;
        font-weight: 700;
        margin-right: 5px;
       }
      .van-icon {
        margin-right: 5px;
        font-size: 17px;
        margin-top: 3px;
      }
    }
    h2 {
      font-weight: 400;
      font-size: 20px;
    }
    .van-tag {
      margin-left: 20px;
    }
  }
  .search-remen {
    margin-left: 10px;
    margin-top: 100px;
    .search-top {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .van-icon {
        margin-right: 5px;
        font-size: 17px;
        margin-top: 3px;
      }
    }
    h2 {
      font-weight: 400;
      font-size: 20px;
    }
    .van-tag {
      margin-left: 20px;
    }
  }
  .recommend {
    margin-left: 10px;
    margin-top: 40px;
    .recommend-top {
      display: flex;
      .van-icon {
        margin-right: 5px;
        font-size: 17px;
        margin-top: 6px;
      }
      p {
        font-size: 20px;
      }
    }
    .recommend-bottom {
      width: 100%;
      ul {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #fff;
        li {
          margin-top: 15px;
          position: relative;
          .p1{
            font-size: 16px;
            margin: 12px 0;
          }
          .p2{
            color: red;
             font-size: 18px;
             
          }
          img {
            width: 150px;
            
            
           
         
          }
           span{
            position: absolute;
            left: 0;
            bottom: 75px;
            font-size: 16px;
            display: block;
            width: 150px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
          }
        }
      }
    }
  }
}
</style>
